﻿@using MvcSiteMapProvider.Web.Html
@model store.Areas.Home.Models.BasketModel
<div id="site-content">

    <!-- BREADCRUMBS -->
    <div class="inner-action-bar">
        <div class="container">

            <div class="row">
                <div class="col-xs-12 col-sm-12">
                    <div class="breadcrumbs">
                        @Html.MvcSiteMap().SiteMapPath()
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- /BREADCRUMBS -->

    <!-- SIDEBAR + MAIN CONTENT CONTAINER -->
    <div class="main-content">
        <div class="container">

            <div class="row">

                <!-- SIDE BAR -->
                <div class="col-xs-12 col-sm-4 col-lg-3 side">
                    @Html.Action("SidebarRandomProduct", "Product")
                </div>
                <!-- /SIDE BAR -->

                <!-- MAIN CONTENT -->
                <div class="col-xs-12 col-sm-8 col-lg-9 main">

                    <!-- CART ITEMS -->
                    <div class="section">
                        <table class="my-cart">
                            <thead>
                                <tr>
                                    <th class="product-thumbnail">Hình ảnh</th>
                                    <th class="product-name">Tên sản phẩm</th>
                                    <th class="product-qty hidden-xs">Tổng số</th>
                                    <th class="product-price">Giá tiền</th>
                                    <th class="product-action"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (Model.lists != null)
                                {
                                    foreach (var item in Model.lists)
                                    {
                                    <tr>
                                        <td>
                                            <div class="img-placeholder">
                                                <a href="#">
                                                    <img src="~/Files/@item.images" alt="" /></a>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="#">@item.name</a>
                                            <input type="hidden" id="productId" value="@item.ProductId"/>
                                        </td>
                                        <td class="hidden-xs">
                                            <div class="qty-btngroup">
                                                <button type="button" class="minus">-</button>
                                                <input type="text" value="@item.Count" />
                                                <button type="button" class="plus">+</button>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="price">@String.Format("{0:0,000}", @item.Price)</span>
                                        </td>
                                        <td>
                                            <a href="#" class="remove-item"><span class="icon-remove-2"></span></a>
                                        </td>
                                    </tr>

                                    }
                                }
                                else
                                {
                                    <tr>
                                        <td colspan="5">Không có sản phẩm nào trong giỏ.</td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                    </div>
                    <!-- /CART ITEMS -->

                    <!-- ACCORDION CONTENT -->
                    <div class="section">
                        <div id="cart-accordion" class="checkout accordion">

                            <!-- 01: ACCORDION GROUP -->
                            <div class="accordion-group">
                                <div class="accordion-heading">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#cart-accordion" href="#collapse1">
                                        <i class="icon-arrow-right" style="margin-right: 5px;"></i>Thông tin gửi hàng & Chi phí
                                    </a>
                                </div>
                                <div id="collapse1" class="accordion-body collapse">
                                    <div class="accordion-inner">
                                        <p>Điền thông tin nhận hàng.</p>
                                        <form class="form-inline" role="form">
                                            <div class="row">
                                                <div class="form-group col-xs-12 col-sm-3">
                                                    <select class="form-control max-width" id="statsSelect">
                                                        <option value="select state">Chọn Tỉnh thành</option>
                                                    </select>
                                                </div>
                                                <div class="form-group col-xs-12 col-sm-3">
                                                    <select class="form-control max-width" id="statsSelect">
                                                        <option value="select state">Chọn Huyện</option>
                                                    </select>
                                                </div>
                                                <div class="form-group col-xs-12 col-sm-3">
                                                    <input type="text" class="form-control max-width" id="zipcodeInput" placeholder="Địa chỉ nhà" />
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-sm-12 space30 clearfix"></div>
                                            <button type="button" class="btn btn-primary">Tính toán chi phí</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!-- /01: ACCORDION GROUP -->

                            <!-- 02: ACCORDION GROUP -->
                            <div class="accordion-group">
                                <div class="accordion-heading">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#cart-accordion" href="#collapse2">
                                        <i class="icon-arrow-right" style="margin-right: 5px;"></i>Mã giảm giá 
                                    </a>
                                </div>
                                <div id="collapse2" class="accordion-body collapse">
                                    <div class="accordion-inner">
                                        <form role="form">
                                            <div class="form-group">
                                                <label for="discoundInput">Điền mã giảm giá nếu bạn có.</label>
                                                <div class="row">
                                                    <div class="col-xs-12 col-sm-4">
                                                        <input type="text" class="form-control" id="discoundInput" placeholder="Mã giảm giá">
                                                    </div>
                                                    <div class="col-xs-12 space20 visible-xs"></div>
                                                    <div class="col-xs-12 col-sm-4">
                                                        <button type="button" class="btn btn-primary btn-small">Gửi</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!-- /02: ACCORDION GROUP -->

                        </div>
                    </div>
                    <!-- /ACCORDION CONTENT -->

                    <!-- SHOP SUMMARY -->
                    <div class="section">
                        <div class="row">

                            <div class="col-xs-12 col-sm-8 col-lg-6 pull-right center-sm">
                                <table class="shop-summary">
                                    <tr>
                                        <th>Tổng phụ:</th>
                                        <td>@String.Format("{0:0,000}", @Model.TotalPrice)</td>
                                    </tr>
                                    <tr>
                                        <th>Phí vận chuyển)</th>
                                        <td>20,000</td>
                                    </tr>
                                    <tr>
                                        <th>Vat (0.0 %):</th>
                                        <td>0 VND</td>
                                    </tr>
                                    <tr class="total">
                                        <th>Tổng tiền:</th>
                                        <td>@String.Format("{0:0,000}", @Model.TotalPrice + 20000)</td>
                                    </tr>
                                    <tr>
                                        <th><a href="#" class="btn btn-primary">Thanh toán</a></th>
                                        <td><a href="#" class="btn btn-primary">Tiếp tục chọn hàng</a></td>
                                    </tr>
                                </table>
                            </div>

                        </div>
                    </div>
                    <!-- /SHOP SUMMARY -->

                </div>
                <!-- /MAIN CONTENT -->

            </div>

        </div>
    </div>

</div>
